<template>
	<div class="top-bottom-layout">
		<div
			class="layout-box top-box"
			:class="{ 'hidden-box': hideUp, 'large-box': hideDown, 'max-box': hiddenBottom }"
		>
			<slot name="top"></slot>
		</div>

		<!--向上：只显示底部区域-->
		<div class="icon-box" :class="{ 'hidden-box': hideUp || hiddenBottom }">
			<icon-font class="icon" type="cap-icon-middle-column-up" @click.native="onUp"/>
		</div>
		<div
			class="middle-box"
			:class="{ 'hidden-box': hideMiddle || hiddenBottom }"
		>
			<slot name="middle"></slot>
		</div>
		<!--向下：只显示顶部区域-->
		<div class="icon-box" :class="{ 'hidden-box': hideDown || hiddenBottom }">
			<icon-font class="icon" type="cap-icon-middle-column-down" @click.native="onDown"/>
		</div>

		<div
			class="layout-box bottom-box"
			:class="{ 'hidden-box': hideDown || hiddenBottom, 'large-box': hideUp }"
		>
			<slot name="bottom"></slot>
		</div>
	</div>
</template>

<script>
export default {
	name: 'topBottom',
	props: {
		// 带滑动按钮，是否隐藏中间和左下角内容
		isShowDown: { type: Boolean, default: false },
		// 不带滑动按钮，是否隐藏中间和左下角内容
		hiddenBottom: { type: Boolean, default: false }
	},
	data() {
		return {
			/**
			 * 显示北面
			 */
			hideUp: false,
			/**
			 * 显示中间部分
			 */
			hideMiddle: this.isShowDown,
			/**
			 * 显示南面
			 */
			hideDown: this.isShowDown
		};
	},
	watch: {
		isShowDown(newV, oldV) {
			this.hideDown = newV;
			this.hideMiddle = newV;
		}
	},
	methods: {
		onUp() {
			if (this.hideDown) {
				this.showAll();
			} else {
				this.showOnlyBottom();
			}
		},
		onDown() {
			if (this.hideUp) {
				this.showAll();
			} else {
				this.showOnlyTop();
			}
		},
		doHiddenBottom() {
			this.showOnlyTop();
		},
		onHandleShow() {
			this.showAll();
			this.$emit('toShowDown');
		},
		/**
		 * 显示上中下三个区域
		 */
		showAll() {
			this.hideUp = false;
			this.hideDown = false;
			this.hideMiddle = false;
		},
		/**
		 * 只显示下边区域
		 */
		showOnlyBottom() {
			this.hideUp = true;
			this.hideMiddle = true;
			this.hideDown = false;
		},
		/**
		 * 只显示上边区域
		 */
		showOnlyTop() {
			this.hideUp = false;
			this.hideMiddle = true;
			this.hideDown = true;
		}
	}
};
</script>

<style scoped lang="scss">
.top-bottom-layout {
	height: 100%;
	width: 100%;

	.layout-box{
		// overflow: auto;
		height: calc(50% - 21px);
	}
	.top-box {
		overflow-x: hidden;
	}

	.middle-box {
		height: 30px;
		// line-height: 30px;
		display: flex;
		display: -ms-flexbox;
		align-items: center;
		background: #f5f5f5;
		padding: 0 10px 0 14px;
		box-sizing: border-box;
		&/deep/ span{
			font-size: 14px;
			color: $postDefalutFontColor;
		}

	}

	& /deep/ .ant-radio-group {
		width: 100%;
		height: 24px;
		white-space: nowrap;
		overflow: hidden;
		.ant-radio-wrapper {
			height: 24px;
			line-height: 24px;
			float: left;
			font-size: 12px;
			color: $postDefalutFontColor;
			& > span:last-child {
    			padding-right: 4px;
    			padding-left: 4px
			}
		}
	}

	.icon-box {
		width: 100%;
		height: 6px;
		background: #f5f5f5;
		cursor: pointer;
		position: relative;
		overflow: hidden;

		.icon{
			font-size: 50px;
			position: absolute;
			top: -22px;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.hidden-box {
		display: none;
	}
	.large-box {
		height: calc(100% - 6px);
	}
	.max-box {
		height: 100%;
	}
}
</style>
